<template>
	<div>
		<!--<header class="aui-header">
			<a class="aui-pull-left aui-btn">-->
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<!--<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">邀请入驻</div>
		</header>-->
		<div class="inviteback">
			<div class="name">好友{{name}}邀请你入驻友惠家云店</div>
			
			<img src="../assets/inviteback.png" class="invitecon">
			
			<div class="invitemain">
				<div class="paddinvite">
					<div class="sameline"><input type="text" class="sameinput" maxlength="11" placeholder="请输入手机号" ref="phone"></div>
					<div class="sameline" style="border: 0rem;">
						<input type="text" class="verfinput" placeholder="请输入验证码" maxlength="6" ref="code">
						<div v-show="show" class="verfibut" @click="getCode">验证码</div>
						<div v-show="!show" class="verfibut">{{count}} s</div>
					</div>
					<!--<div class="sameline"><input type="text" class="sameinput" v-model="invitecode" readonly="readonly"></div>-->
					<div style="display:none;" class="sameline"><input type="text" class="sameinput" placeholder="微信号（必填，可通过此号找到你）" ref='wx'></div>
					<div class="drawbut" @click="drawbuteEvent()">领取奖励</div>
				</div>
			</div>
		</div>
		<div class="maskcon" v-show="maskshow" @click="hidemask">
			<div class="maskmain" v-show="successhow">
				<div class="maskfont">
					<h4>已领取</h4>
					<span class="maskspan">您已经成功领取入驻奖励币</span>
				</div>
				<div class="maskbut" @click="imUse">立即使用</div>
			</div>
			<div class="maskmain" v-show="repeatshow">
				<div class="maskfont" style="height: 2.5rem;">

					<span class="maskspan" v-model="successmsg">{{successmsg}}</span>
				</div>
				<div class="maskbut" @click="openBut">打开友惠家App</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				show: true,
				isShow: false,
				count: '',
				maskshow: false,
				repeatshow: false,
				successhow: false,
				listjson: [],
				timer: null,
				invitecode: '',
				inviteId: '',
				successmsg: 'new',
				newUrl: '',
				name:''
			}
		},
		created() {
			var href = window.location.href;
			this.invitecode = this.$route.query.parentId
			this.inviteId = this.$route.query.parentId
//			this.name =unescape(this.$route.query.name)
			var jie = this.$route.query.name
			this.name = unescape(jie)
//			console.log(this.name)
//			href = href.substring(href.indexOf('parentId='), href.length);
//			this.invitecode = href.split('=')[1];
//			console.log(this.invitecode)
//			this.inviteId = href.split('=')[1];
			//console.log(href.split('?')[1].split('=')[1]);
//			console.log(this.inviteId);
			var url = BaseUrl + 'users/invite/getInviteCodeByParentId?parentId=' + this.invitecode;
			this.$http.get(url).then(res => {
//				console.log(res)
				if(res.data.code == "10000") {
					this.invitecode = res.data.data;
				} else {
					this.invitecode = res.data.msg;
				}
			})

		},
		methods: {
			getCode() {
//				var reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				const TIME_COUNT = 60;
				var phone = this.$refs.phone.value;
//				console.log(this.timer);
				if(!this.timer && phone.length == 11) {
					this.count = TIME_COUNT; 
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
					
					var url = BaseUrl + 'login/code?phone=' + phone;
					this.$http.get(url).then(res => {
						if(res.data.code == "10000") {
							this.listjson = res;
						} else {
							Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
							});
						}

					})
				} else {
					Toast({
						message: "请输入正确手机号码",
						position: 'middle',
						duration: 3000
					});
					return;
				}

			},
			drawbuteEvent: function() {
				var phone = this.$refs.phone.value;
				var code = this.$refs.code.value;
				var wx = this.$refs.wx.value;
//				var reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(phone.length == 11 && code.length) {
					var url = BaseUrl + 'users/invite/regYun?phone=' + phone + '&code=' + code + '&inviteCode=' + this.invitecode + '&parentId=' + this.inviteId + '&wx=' + wx;

					this.$http.get(url).then(res => {
//						console.log(this.successmsg);
						this.listjson = res;
						if(res.data.code == "10000") {
							this.maskshow = true;
							this.successhow = true;
							this.newUrl = res.data.data;
						} else {
							//console.log(res.data.msg);
							this.newUrl = res.data.data;
							this.maskshow = true;
							this.successmsg = res.data.msg;
							this.repeatshow = true;

						}
						//console.log(res)

					})
				} else {
					Toast({
						message: "请输入正确手机号码、手机验证码、微信号",
						position: 'middle',
						duration: 3000
					});
					return;
				}
				//var invitecode = this.$refs.invitecode.value;

			},
			hidemask: function() {
				this.maskshow = false;
				this.successhow = false;
				this.repeatshow = false;
			},
			imUse: function() {
				window.location.href = this.newUrl
			},
			openBut: function() {
				window.location.href = this.newUrl
			}
		}
	}
</script>

<style scoped="scoped">
	.inviteback {
		width: 100%;
		height: 100%;
		/*margin-top: 1rem;*/
	}
	
	.invitecon {
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.name{
		width: 100%;
		position: absolute;
		text-align: center;
		font-size: 0.36rem;
		color: #FFFFFF;
		bottom: 6.3rem;
	}
	
	.invitemain {
		position: absolute;
		width: 94.1%;
		/*height: 47.2%;*/
		background-color: #fff;
		bottom: 0.3rem;
		margin: 0 auto;
		left: 50%;
		transform: translate(-50%, 0%);
		border-radius: 0.12rem;
		box-shadow: 0rem 0rem 0.5rem 0.46rem rgba(0, 0, 0, 0.04);
	}
	
	.paddinvite {
		padding: 0.53rem;
		margin-top: 0.35rem;
	}
	
	.sameline {
		width: 100%;
		border-bottom: solid 1px #dbdbdb;
		height: 0.85rem;
	}
	
	.drawbut {
		width: 100%;
		height: 0.96rem;
		border-radius: 0.08rem;
		background-color: #FF2040;
		margin-top: 0.7rem;
		line-height: 0.9rem;
		color: #FFFFFF;
		font-size: 0.32rem;
		text-align: center;
	}
	
	.sameinput {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		outline: none;
		
	}
	
	:-moz-placeholder {
	    color:#4A4A4A; 
	    opacity:0.5; 
    	font-size: 0.32rem;
	}
	
	::-moz-placeholder {
	    color: #4A4A4A;
	    opacity:0.5;
	    font-size: 0.32rem;
	}
	
	input:-ms-input-placeholder{
	    color: #4A4A4A;
	    opacity:0.5;
	    font-size: 0.32rem;
	}
	
	input::-webkit-input-placeholder{
	    color: #4A4A4A;
	    opacity:0.5;
	    font-size: 0.32rem;
	}
	
	.verfinput {
		width: 60%;
		height: 0.8rem;
		line-height: 0.8rem;
		outline: none;
		border-bottom: solid 0.01rem #dbdbdb;
	}
	
	.verfibut {
		width: 2.07rem;
		height: 0.69rem;
		background-color: #f6f6f6;
		border-radius: 0.08rem;
		float: right;
		margin-top: 0.1rem;
		line-height: 0.69rem;
		text-align: center;
		color: #4A4A4A;
		font-size: 0.28rem;
	}
	/****蒙版内容*****/
	
	.maskcon {
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		top: 0px;
		left: 0rem;
	}
	
	.maskmain {
		width: 80%;
		height: 3.85rem;
		background-color: #FFFFFF;
		border-radius: 0.22rem;
		margin: 0 auto;
		margin-top: 60%;
	}
	
	.maskfont {
		padding: 0.62rem;
	}
	
	.maskfont>h4 {
		font-size: 0.3rem;
		text-align: center;
	}
	
	.maskspan {
		margin-top: 0.3rem;
		text-align: center;
		display: block;
		color: #999;
		font-size: 0.3rem;
	}
	
	.maskbut {
		width: 100%;
		height: 1rem;
		background-color: #FF2040;
		color: #FFFFFF;
		text-align: center;
		line-height: 1rem;
		margin-bottom: 0;
		margin-top: 0.5rem;
		border-bottom-left-radius: 0.22rem;
		border-bottom-right-radius: 0.22rem;
		font-size: 0.32rem;
	}
</style>